<template>
  <view class="videoPlay_container">
    <video id="myVideo" class="my-video" :src="videoData.url" controls enable-play-gesture></video>
    <view class="info">
      <view class="title">
        <text class="goodsName">{{ videoData.title }}</text>
        <text class="watch">{{ videoData.viewCount }}次观看</text>
      </view>
      <view class="viewAndCollection">
        <view class="goodsInfo">
          <view>
            <text class="ephedrine" v-if="data.ephedrine">含麻</text>
            <text class="simpleSpecs">{{ data.simpleSpecs }}</text>
          </view>
          <view class="manufacturer">
            <img :src="staticUrl() + '/home/manufacturer.png'" alt="" class="_icon" />
            <text>{{ extension.manufacturer }}</text>
          </view>
        </view>
        <!-- 点赞 收藏 -->
        <view class="image">
          <img :src="
              collectionStatus
                ? staticUrl() + '/home/collectioned.png'
                : staticUrl() + '/home/collection.png'
            " @click="clickCollectionImage" />
          <img :src="
              videoLikeStatus
                ? staticUrl() + '/home/videoLiked.png'
                : staticUrl() + '/home/videoLike.png'
            " @click="clickVideoLikeImage" />
        </view>
      </view>
      <view class="activityType" v-if="promotions">
        <text>活动:</text>
        <text class="type">{{ promotions[0].title }}</text>
        <img :src="staticUrl() + '/home/more.png'" alt="" class="more" @click="ruleStatus = true" />
      </view>
      <view class="activityType_price" v-if="hasToken() && (data.promotionPrice || data.price)">
        <text>活动价:</text>
        <text v-if="data.promotionPrice">￥{{ data.promotionPrice }}</text>
        <text v-if="!data.promotionPrice">￥{{ data.price }}</text>
        <text v-if="data.promotionPrice">￥{{ data.price }}</text>
      </view>
      <view class="activityType_price" v-if="!hasToken()">
        <text>活动价:</text>
        <text>登录可见</text>
      </view>
      <view class="activityType_price" v-if="hasToken() && !data.promotionPrice && !data.price">
        <text>活动价:</text>
        <text>资质审核可见</text>
      </view>
      <view class="reminder">
        <view class="one">温馨提示:</view>
        <view style="margin-bottom: 26.39rpx">
          <view class="two">1、图片仅供参考。如本品同时存在新旧包装，则会随时发货。</view>
          <view class="two" style="margin-bottom: 0">2、药品为特殊商品，非质量问题不予退换！</view>
        </view>
      </view>
      <view class="info_content">
        商品详情
        <view style="
            border: 1px solid #f5f5f5;
            border-radius: 11rpx;
            padding: 0 30.56rpx;
            margin-top: 36.81rpx;
          ">
          <view class="item">
            <text class="key">商品名称</text> <text class="value">{{ data.goodsName }}</text>
          </view>
          <view class="item">
            <text class="key">商品编号</text> <text class="value">{{ data.identifier }}</text>
          </view>
          <view class="item">
            <text class="key">有效期限</text> <text class="value">{{ data.expirationDate }}</text>
          </view>
          <view class="item">
            <text class="key">主治功能</text> <text class="value">{{ extension.indications }}</text>
          </view>
          <view class="item">
            <text class="key">整件数</text>
            <text class="value">{{ extension.crate }}{{ data.goodsUnit }}</text>
          </view>
          <view class="item">
            <text class="key">库存</text> <text class="value">{{ data.quantity }}</text>
          </view>
          <view class="item">
            <text class="key">产品规格</text> <text class="value">{{ data.simpleSpecs }}</text>
          </view>
          <view class="item">
            <text class="key">批准文号</text> <text class="value">{{ extension.approvalNo }}</text>
          </view>
          <view class="item">
            <text class="key">生产厂家</text>
            <text class="value">{{ extension.manufacturer }}</text>
          </view>
          <view class="item">
            <text class="key">产地</text> <text class="value">{{ extension.place }}</text>
          </view>
          <view class="item"> <text class="key">医保类型</text> <text class="value"></text> </view>
        </view>
      </view>
      <view style="width: 100%; height: 104rpx"></view>
    </view>
    <view class="carts">
      <view class="addCarts" @click="addCartsStatus = true"> 加入购物车 </view>
    </view>
    <!-- 加入购物车  添加数量 -->
    <view class="addCartsNum" v-if="addCartsStatus" @click.stop="addCartsStatus = false">
      <view class="content" @click.stop="">
        <view class="number">
          <text @click="reduce">-</text>
          <input v-model="num" @change="changeNum" />
          <text @click="add">+</text>
        </view>
        <view class="shopcar">
          <text @click="clickBar">确定</text>
        </view>
      </view>
    </view>
    <!-- 规则弹窗 -->
    <view class="ruleStyle" v-if="ruleStatus">
      <view class="rule">
        <view class="title">
          <text>活动规则</text>
          <img :src="staticUrl() + '/home/close.png'" @click="ruleStatus = false" />
        </view>
        <view class="rule_item">
          <text class="type">{{ promotions[0].title }}</text>
          <text class="item">{{ rules }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getVideoInfo, queryLikes, addLikes, deleteLikes } from '@/api/video/index.js'
import {
  hasCollection,
  collection,
  cancelCollection,
  getGoodsInfo,
  addToCart
} from '@/api/home/index'

export default {
  data () {
    return {
      videoData: '',
      id: '',
      collectionStatus: false,
      videoLikeStatus: false,
      data: '',
      extension: '',
      promotions: '',
      num: 0,
      pack: 0,
      ruleStatus: false,
      addCartsStatus: false
    }
  },

  onLoad (id) {
    this.id = id.id
    // 点赞
    queryLikes('VIDEO', id.id).then(res => {
      if (res.code === 200) {
        this.videoLikeStatus = res.data
      }
    })
    // 收藏
    hasCollection('VIDEO', id.id).then(res => {
      if (res.code === 200) {
        this.collectionStatus = res.data
      }
    })

    getVideoInfo(id.id).then(res => {
      if (res.code === 200) {
        this.videoData = res.data
      }
      // 商品信息
      getGoodsInfo(res.data.skuId, true).then(res => {
        if (res.code === 200) {
          this.data = res.data.data
          this.extension = res.data.extension
          this.promotions = res.data.promotions
          this.num = res.data.data.pack
          this.pack = res.data.data.pack
        }
      })
    })
  },
  methods: {
    // 收藏
    clickCollectionImage () {
      if (this.collectionStatus) {
        // 删除 点赞
        cancelCollection('VIDEO', this.id).then(res => {
          if (res.code === 200) {
            this.collectionStatus = false
          }
        })
      } else {
        // 添加 点赞
        collection('VIDEO', this.id).then(res => {
          if (res.code === 200) {
            this.collectionStatus = true
          }
        })
      }
    },
    // 点赞
    clickVideoLikeImage () {
      if (this.videoLikeStatus) {
        // 删除 收藏
        deleteLikes('VIDEO', this.id).then(res => {
          if (res.code === 200) {
            this.videoLikeStatus = false
          }
        })
      } else {
        // 添加 收藏
        addLikes('VIDEO', this.id).then(res => {
          if (res.code === 200) {
            this.videoLikeStatus = true
          }
        })
      }
    },
    // 加入购物车
    clickBar () {
      this.addCartsStatus = false
      addToCart({
        num: this.num,
        skuId: this.id
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            icon: 'success',
            title: '成功',
            mask: true
          })
        }
      })
    },
    // 监听 数量input 变化
    changeNum () {
      this.num > 0 ? '' : (this.num = this.pack)
      this.num % this.pack < this.pack
        ? (this.num = parseInt(this.num / this.pack) * this.pack)
        : ''
    },
    add () {
      this.num += this.pack
    },
    reduce () {
      this.num > this.pack ? (this.num -= this.pack) : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.videoPlay_container {
  background: #f9f9f9;

  .my-video {
    width: 100%;
    height: 424rpx;
  }

  .info {
    .title {
      display: flex;
      justify-content: space-between;
      background: #fff;

      .goodsName {
        font-size: 33rpx;
        font-weight: bold;
        margin-top: 50.69rpx;
        margin-left: 25.69rpx;
      }

      .watch {
        font-size: 28rpx;
        color: #8d8d8d;
        margin-top: 53.47rpx;
        margin-right: 65rpx;
      }
    }

    .viewAndCollection {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      margin-bottom: 20.83rpx;
      background: #fff;

      .goodsInfo {
        margin: 41.67rpx 0 54.86rpx 27.08rpx;
        font-size: 25rpx;
        color: #8d8d8d;

        .manufacturer {
          margin-top: 20.14rpx;

          ._icon {
            width: 20rpx;
            height: 20rpx;
            vertical-align: middle;
            margin-right: 8rpx;
          }
        }
      }

      .image {
        padding-top: 80rpx;

        img {
          width: 43rpx;
          height: 42rpx;
          margin-right: 65rpx;
        }
      }
    }

    .activityType {
      margin-bottom: 2rpx;
      padding: 45.83rpx 25rpx 35.42rpx 29.17rpx;
      background: #fff;

      text {
        font-weight: bold;
        font-size: 30rpx;
      }

      .type {
        border: 1px solid #ed1b19;
        font-weight: normal;
        font-size: 22rpx;
        padding: 0 6rpx;
        color: #ed1b19;
        border-radius: 10rpx;
        margin-left: 86.64rpx;
      }

      .more {
        width: 48rpx;
        height: 10rpx;
        float: right;
        margin-top: 20rpx;
        margin-right: 16rpx;
      }
    }

    .activityType_price {
      background: #fff;
      padding: 35.42rpx 0 45.83rpx 27.78rpx;

      text:nth-child(1) {
        margin-right: 55.56rpx;
        font-weight: bold;
        font-size: 30rpx;
      }

      text:nth-child(2) {
        font-size: 28rpx;
        color: #ed1b19;
        font-weight: bold;
      }

      text:nth-child(3) {
        font-size: 21rpx;
      }
    }

    .reminder {
      background: #fff;
      padding: 27.08rpx 0 0 29.17rpx;
      display: flex;
      margin-top: 16rpx;

      .one {
        font-weight: bold;
        font-size: 30rpx;
        margin-right: 27.08rpx;
      }

      .two {
        opacity: 0.6;
        font-size: 20rpx;
        margin-bottom: 17.36rpx;
      }
    }

    .info_content {
      padding: 43.75rpx 0 0 29.86rpx;
      margin-top: 20.14rpx;
      background: #fff;
      font-weight: bold;
      font-size: 33rpx;

      .item {
        font-size: 28rpx;
        font-weight: normal;
        margin-bottom: 63.89rpx;
        display: flex;

        .key {
          display: inline-block;
          min-width: 120rpx;
          margin-right: 31.25rpx;
          opacity: 0.6;
        }

        .value {
          display: inline-block;
        }
      }

      .item:first-child {
        margin-top: 20.83rpx;
      }

      .item:last-child {
        margin-bottom: 61.11rpx;
      }
    }
  }

  .carts {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 104rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(58, 60, 62, 0.06);

    .addCarts {
      width: 243rpx;
      height: 83rpx;
      line-height: 83rpx;
      font-size: 33rpx;
      color: #fff;
      background: #2871fc;
      float: right;
      text-align: center;
      margin: 10.42rpx 34.72rpx 10.42rpx 0;
      margin-left: 120rpx;
      border-radius: 42rpx;
    }
  }

  .addCartsNum {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 50rpx 60rpx;
      border-radius: 16rpx;

      .number {
        display: flex;

        text {
          display: inline-block;
          width: 50rpx;
          background: #fff;
          border: 1px solid #2871fc;
          border-radius: 10rpx;
          text-align: center;
        }

        input {
          display: inline-block;
          width: 200rpx;
          height: 50rpx;
          text-align: center;
          border: 1px solid #2871fc;
          border-radius: 10rpx;
          margin: 0 20rpx;
        }
      }

      .shopcar {
        text {
          display: inline-block;
          background: #2871fc;
          color: #fff;
          border-radius: 100rpx;
          text-align: center;
          margin-top: 44rpx;
          margin-left: 15%;
          width: 70%;
          font-size: 28rpx;
          padding: 6rpx 0;
        }
      }
    }
  }

  .ruleStyle {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;

    .rule {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60%;
      background: #fff;
      z-index: 1000;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;

      .title {
        position: relative;

        text {
          display: inline-block;
          font-size: 32rpx;
          font-weight: bold;
          width: 100%;
          text-align: center;
          margin-top: 35rpx;
        }

        img {
          width: 20rpx;
          height: 20rpx;
          position: absolute;
          right: 50rpx;
          top: 50rpx;
        }
      }

      .rule_item {
        margin-top: 50rpx;

        .type {
          border: 1px solid #ed1b19;
          font-weight: normal;
          font-size: 22rpx;
          padding: 0 6rpx;
          color: #ed1b19;
          border-radius: 10rpx;
          margin-left: 50rpx;
          margin-right: 50rpx;
        }

        .item {
          font-size: 24rpx;
          opacity: 0.6;
        }
      }
    }
  }
}
</style>
